import React, { Component } from 'react';
import '../css/shoppingDetail.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import axios from  'axios'
import ShopLunbo   from  './shopLunbo'
import  {Toast} from 'antd-mobile'
@observer class shoppingDetail extends Component {
    constructor(props) {
        super(props)
        this.state={
            shops:{productImages:[]},
            sum:'',
            gouwucheSum:''
        }
    }
    componentDidMount(){
        Mobx.history= this.props.history
        axios.get('http://www.niuduxiu.com/mobile/product/detail/'+this.props.match.params.goodsId+'.jhtml?pingNum=1&memberId='+Mobx.zhanghao)
            .then((item)=>{
                item.data.returnValue.map((item,index)=>{
                    if(item.id==this.props.match.params.productsId){
                        this.setState({
                            shops:item
                        },()=>{
                            this.setState({
                                sum:parseInt(this.state.shops.meiyong)
                            })
                        })
                    }
                })
            })
        axios.get('http://www.niuduxiu.com/mobile/cart/cartList.jhtml?memberId='+Mobx.zhanghao)
            .then((item)=>{
                this.setState({
                    gouwucheSum:item.data.returnValue.length
                })
            })
    }
    jian(){
        if(this.state.sum<=1){
            return false;
        }
        this.setState({
            sum:this.state.sum-1
        })
    }
    add(){
        if(this.state.sum>=this.state.shops.availableStock){
            return false;
        }
        this.setState({
            sum:this.state.sum+1
        })
    }
    addCart(){
        if(this.state.sum>0){
            axios.post('http://www.niuduxiu.com/mobile/cart/addCart.jhtml?memberId='+Mobx.zhanghao+'&productId='+this.props.match.params.productsId+'&quantity='+this.state.sum)
                .then((item)=>{
                    if(item.data.success){
                        Toast.success('加入购物车成功', 1);
                        axios.get('http://www.niuduxiu.com/mobile/cart/cartList.jhtml?memberId='+Mobx.zhanghao)
                            .then((item)=>{
                                this.setState({
                                    gouwucheSum:item.data.returnValue.length
                                })
                            })
                    }else{
                        Toast.fail(item.data.errorReason, 1);
                    }
                })
        }
    }
    toCart(){
        if(this.state.gouwucheSum>0){
           this.props.history.push('/Card')
        }else{
            Toast.fail('购物车是空的，请添加一条吧。。。', 1);
        }
    }
    render() {
        let str='';
        if(this.state.shops.mobileIntroduction){
            str=this.state.shops.mobileIntroduction.replace(/\/upload/g,"http://www.niuduxiu.com/upload")
        }
        return (
            <div className="shoppingDetail">
                <ShopLunbo images={this.state.shops.productImages} />
                <div className='shoppingDetailDetail'>
                    <p className='title'>{this.state.shops.name}</p>
                    <p className='content'>{this.state.shops.seoDescription}</p>
                    <p className='price'>
                        <span>￥{this.state.shops.price}</span>
                        <i>￥{this.state.shops.marketPrice}</i>
                    </p>
                    <div className='Number'>
                        <div className='left'>数量</div>
                        <div className='right'>
                           <span onClick={this.jian.bind(this)}>-</span>
                           <span onClick={this.add.bind(this)}>+</span>
                            <p>{this.state.sum}</p>
                        </div>
                    </div>
                    <div className='Number'>
                        <div className='left'>库存</div>
                        <div className='rightOther'>
                            {this.state.shops.availableStock}
                        </div>
                    </div>
                    <div className='Number'>
                        <div className='left'>销量</div>
                        <div className='rightOther'>
                            {this.state.shops.monthSales}
                        </div>
                    </div>
                    <div className='kongbai'></div>
                    <div className='title'>
                        实物介绍
                    </div>
                    <div className='introduce' dangerouslySetInnerHTML={{__html: str}}></div>
                </div>
                <ul className='foot'>
                    <li onClick={this.toCart.bind(this)}>购物车（ <span>{this.state.gouwucheSum}</span> ）</li>
                    <li onClick={this.addCart.bind(this)}>加入购物车</li>
                    <li>立即购买</li>
                </ul>
            </div>
        );
    }
}

export default shoppingDetail;
